<template>
  <div>
    <!--本体列表，数据 -->
    <div class="table-body mt-20">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c"
            @selection-change="handleSelectionChange"
            @row-click="rowClick">
          <el-table-column
              align="center"
              type="selection"
              width="50">
          </el-table-column>
          <el-table-column
              prop="book_name"
              label="图书名称">
            <template slot-scope="scope">
              <span>{{ scope.row.book.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="作者"
              width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.book ? scope.row.book.editor : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="类目">
            <template slot-scope="scope">
              <span>{{ scope.row.book ? scope.row.book.bookCatName : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="存放位置"
              width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.book ? scope.row.book.position : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="code"
              label="条形码"
              width="200">
          </el-table-column>
          <el-table-column
              label="借阅人员"
              width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.book ? scope.row.examine.realname : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="借出时间"
              width="110">
            <template slot-scope="scope">
              <!--<span :class="scope.row.is_borrow==1?'canborrow':'notborrow'">{{scope.row.is_borrow==1?'待还':'已还'}}</span>-->
              {{ scope.row.examine_time }}
            </template>

          </el-table-column>
          <el-table-column
              prop="return_time"
              label="预还时间"
              width="110">
            <template slot-scope="scope">
              <span
                  :class="Date.parse(scope.row.return_time) > new Date()?'':'redColor'">{{
                  scope.row.return_time
                }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="图书状态"
              width="80">
            <template slot-scope="scope">
              待还书
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="small" @click="openBorrwBook(scope.row.id)">还书</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'

export default {
  props:['searchForm'],
  data() {
    return {
      // 设置table样式
      tableStyle: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索组件// 搜索组件
      searchData: {},
      applyBookBox: {} // 选中的内容
    }
  },
  watch:{
    searchForm(){
      console.log('searchForm:',this.searchForm)
      this.searchData = this.searchForm;
      this.detailBox()
    }
  },
  created() {
    console.log('进入待还书')
    // this.detailBox()
  },
  methods: {
    async detailBox() {
      let n = this;
      this.searchForm.p = this.page.pageindex;
      this.searchForm.status = 1; // 状态0申请中1待归还2已归还 3驳回
      let data = await this.$fetch(this.api.admin_read_index, this.searchForm)
      console.log('请求数据了啊', data)
      if (!data.code) {
        for (let i in data.list.data) {
          data.list.data[i].create_time = data.list.data[i].create_time.split(' ')[0]
          data.list.data[i].examine_time = data.list.data[i].examine_time.split(' ')[0]
        }
        this.arryList = this.getJson(data.list.data);
        this.page.total = data.list.total;
        this.$emit('getNewNumber',data.number)
        n.$nextTick(function () {
          n.checked() // 每次更新了数据，触发这个函数即可。
        })
      }
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.detailBox()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      let valBox = {}
      if (val.length !== 0) {
        for (let i = 0; i < val.length; i++) {
          valBox[val[i].id] = val[i]
        }
      }
      for(let n in this.arryList){
        if(valBox[this.arryList[n].id]){
          this.applyBookBox[this.arryList[n].id] = JSON.parse(JSON.stringify(this.arryList[n]))
        }else{
          delete this.applyBookBox[this.arryList[n].id]
        }
      }
    },
    // 选中单行数据内容
    rowClick(option, column, event) {
      console.log('查看内容信息option', option)
      console.log('查看内容信息column', column)
      if (column.label !== '操作') {
        if (!this.applyBookBox[option.id]) {
          this.applyBookBox[option.id] = option
        } else {
          delete this.applyBookBox[option.id]
        }
        this.checked() // 进行样式展示
      }
    },
    // 单行选中样式
    checked() {
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.applyBookBox[this.arryList[i].id]) {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], true)
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], false)
        }
      }
    },
    // 还书
    openBorrwBook(id) {
      let that = this
      this.$confirm('确认归还此书籍，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.applyBookStateFn(id)
      }).catch(() => {
      })
    },
    async applyBookStateFn(id) {
      let data = await this.$post(this.api.admin_read_returnd, {id: id})
      if (!data.code) {
        this.getNewList()
        this.$message.success('操作成功！')
      } else {
        this.$message.error(data.msg)
      }
    },
    // 刷新页面列表-缓冲
    getNewList() {
      this.detailBox()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 批量还书
    BatchOperation() {
      let n = this;
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message.error('请选择需要还的书籍')
        return
      }
      console.log('还的书本：', this.applyBookBox)
      let bookLine = [];
      let bookId = [];
      for (let i in this.applyBookBox) {
        bookLine.push('《' + this.applyBookBox[i].book.name + '》')
        bookId.push(this.applyBookBox[i].id)
      }
      console.log('还的书本名：', bookLine)
      this.$confirm('确认对此' + bookLine.length + '本书籍进行还书处理，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        n.applyBookStateFn(bookId.join(','))
      }).catch(() => {
      })
    }
  },
  mounted() {
  }
}
</script>
